<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>带序号的新闻列表效果</title>
    <style>
      body,
      h3,
      ul {
        margin: 0;
        padding: 0;
      }

      .news_list {
        margin: 70px auto;
        width: 343px;
        border: 1px solid #bfbfbf;
        padding: 17px 16px 15px 15px;
      }

      h3 {
        font-family: "Microsoft YaHei";
        font-weight: bold;
        font-size: 20px;
        color: #050204;
      }

      .news_list ul {
        list-style: none;
        margin-top: 28px;
      }

      .news_list ul li {
        font-family: "Microsoft YaHei";
        font-weight: bold;
        font-size: 16px;
        color: #333;
        height: 33px;
        line-height: 33px;
        border-bottom: 1px solid #e9e9e9;
      }

      .news_list a:hover {
        color: #ff3333;
      }

      .first_num {
        color: #ff3333;
      }

      .second_num {
        color: #ff3300;
      }

      .third_num {
        color: #ff6600;
      }

      .other_num {
        color: #000;
      }

      .news_list a {
        color: #333;
        text-decoration: none;
      }

      .news_list span {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div class="news_list">
      <h3>百度新闻热榜</h3>
      <ul>
        <li>
          <a href="#" title="链接">
            <span class="first_num">1</span>
            全国人代会第二次全体会议热？
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="second_num">2</span>
            美官员承认美国在乌生物实验室有料
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="third_num">3</span>
            组关键词读懂“两高”报告热
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="other_num">4</span>
            建议独生子女父母退休金上调10-20%新
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="other_num">5</span>
            昨日新增本土确诊233例无症状322例热
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="other_num">6</span>
            陕西新增10例本土确诊病例新
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="other_num">7</span>
            新冠或致大脑萎缩 使人提前老10岁
          </a>
        </li>
        <li>
          <a href="#" title="链接">
            <span class="other_num">8</span>
            新冠或致大脑萎缩 使人提前老10岁
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
